// @import "src/styles/base/fn";
@import "../mui-mask/mui-mask";

.mui-popup {

    // position: fixed;
    // left: 0;
    // top: 0;
    // right: 0;
    // bottom: 0;
    // z-index: 1000;
    // transition: all 0.3s ease;
    .mui-popup__container {
        position: fixed;
        background: #fff;
        z-index: 1001;
        opacity: 0;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: opacity 0.3s ease; // transform: translate(100%, 100%);
        visibility: hidden;
    }
    .mui-popup-show {
        visibility: visible;
        opacity: 1; // position: absolute;
    }
    .mui-popup__content {
        // transition: all 0.3s ease;
        // position: absolute;
        // left: -50%;
        // top: -50%;
        // transform: translate(-50%, -50%);
        // text-align: center;
    }
}




// origin
// .mui-popup {
//     position: fixed;
//     left: 0;
//     top: 0;
//     right: 0;
//     bottom: 0;
//     z-index: 1000;
//     transition: all 0.3s ease;
//     .mui-popup__container {
//         width: 100%;
//         height: 100%;
//         transform: translate(100%, 100%);
//         position: absolute;
//         z-index: 1001;
//     }
//     .mui-popup__content {
//         position: absolute;
//         left: -50%;
//         top: -50%;
//         transform: translate(-50%, -50%);
//         text-align: center;
//     }
// }
// // actionsheet modal
.mui-actionsheet,
.mui-modal,
.mui-picker {
    // .mui-popup__content {
    //     width: 100%;
    //     left: 0;
    //     top: 0;
    //     transform: translate(-100%, -100%);
    // }
    .mui-popup__container {
        bottom: 0;
        left: 0;
        top: auto;
        width: 100%;
        transition: all 0.3s ease;
        transform: translateY(100%);
    }
    .mui-popup-show {
        transform: translateY(0);
    }
}

.mui-modal__content {
    min-height: px2rem(503);
    max-height: px2rem(663); // background-color: #fff;
    overflow: auto;
}
